@charset 'utf-8';

@import 'common';

$advantage-color: #8fc31f;
$product-title-color: #fffefe;
$product-text-color: #d4e1f5;
.banner-wrapper{
    margin-top: 50px;
    background: #2b80d9;
    .banner{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 65.7%;
        img{
            @include img;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    
}
.engine{
    padding-top: 105px;
    background-color: #fbfaf7;
    .engine-bgi{
        padding-bottom: 100px;
        background: url('../images/index_pic_02.jpg') no-repeat right top 53px;
        background-size: 365px 464px;
    }
    h2{
        font-size: 47.75px;
        color: $main-color-bule;
        margin-bottom: 33px;
    }
    h3{
        font-size: 30.22px;
        color: #666666;
        margin-bottom: 78px;
    }
    .engine-cont{
        margin-bottom: 45px;
        .icon{
            width: 64px;
            height: 64px;
            border-radius: 4px;
            margin-left: 15px;
            padding: 0;
            img{
                @include img;
            }
        }
        p{
            font-size: 19.24px;
            color: #333333;
        }
        span{
            font-size: 14px;
            color: #666666;
        }
    }
    
}
.advantage{
    padding-top: 90px;
    .advantage-bgi{
        padding-bottom: 89px;
        background: url('../images/index_pic_03.jpg') no-repeat left top 96px;
        h2{
            font-size: 48.06px;
            color: $advantage-color;
            margin-bottom: 45px;
        }
        .advantage-cont{
            display: flex;
            align-items: center;  
            margin-bottom: 16px;
            .icon{
                width: 54px;
                height: 54px;
                border-radius: 50%;
                margin-left: 6px;
                padding: 0;
                background: $advantage-color;
                img{
                    @include img;
                }
            }
            p{
                font-size: 14px;
                color: #666666;
                margin-bottom: 0;
            } 
        }
    }
}
.product{
    padding-top: 90px;
    padding-bottom: 140px;
    background-color: #0079d7;
    h2{
        font-size: 48.45px;
        color: $product-title-color;
        text-align: center;
    }
    .product-cont{
        display: flex;
        margin-top: 75px;
        .icon{
            width: 66px;
            height: 66px;
            margin-top: 14px;
            margin-right: 42px;
            margin-left: 42px;
            padding: 0;
            img{
                @include img;
            }
        }
        p{
            font-size: 32.89px;
            color: $product-title-color;
        }
        span{
            font-size: 14px;
            line-height: 30px;
            color: $product-text-color;
        }
    }
    
}
.game{
    padding-top: 65px;
    padding-bottom: 40px;
    .game-title{
        margin-bottom: 36px;
        h2{
           font-size: 34.65px;
           color: #2a2a2a; 
        }
        span{
            font-size: 14px;
            text-align: right;
            margin-top: 20px;
            a{
                color: #2a2a2a;
                text-decoration: none;
            }
        }
    }
    .game-video{
        width: 100%;
        max-width: 370px;
        height: 200px;
        border-radius: 4px;
        video{
            width: 100%;
            height: 100%;
        }
    }
    .game-icon{
        margin-top: 7px;
        a{
            text-decoration: none;
        }
        .icon{
            border-radius: 8px;
            padding: 0;
            img{
                @include img;
				margin: 0 auto;
            }
        }
        p{
            height: 40px;
            font-size: 14px;
            color: #2a2a2a;
            text-align: center;
            margin-top: 7px;
            margin-bottom: 0;
        }
    }
}
.partners{
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: #f4f4f4;
    h2{
       font-size: 30px;
       color: #2a2a2a;
       margin-bottom: 32px;
       span{
           font-size: 11.21px;
           color: #9c9c9c;
       } 
    }
    .icon-wrapper{
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
         .icon{
            border: 1px solid #dddddd;
            border-radius: 2px;
            background: #fdfffe;
            img{
                @include img;
            }
        }
    }
   
}


@media only screen and (max-width: 991px){
    .engine .engine-bgi{
        background-image: none;
    }
    .advantage{
        .advantage-bgi{
           background-image: none; 
        }
    } 
    .game{
        .game-title{
            h2{
                text-align: center;
            }
        }
       .game-video{
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
        } 
    }
    
}
@media only screen and (max-width: 767px){
    .engine{
        padding-top: 50px;
        h2{
            font-size: 35.75px;
            margin-bottom: 20px;
        }
        h3{
            font-size: 20.22px;
            margin-bottom: 50px;
        }
        .engine-cont{
            margin-bottom: 30px;
            p{
                font-size: 16.24px;
            }
            span{
                font-size: 12px;
            }
        }
        .engine-bgi{
          padding-bottom: 30px;  
        }
    }
    .advantage{
        padding-top: 50px;
        .advantage-bgi{
            padding-bottom: 30px;
            h2{
               font-size: 35.75px; 
            }
        }
    } 
    .product{
        padding-top: 50px;
        padding-bottom: 46px;
        h2{
            font-size: 35.75px;
        }
        .product-cont{
            margin-top: 40px;
            .icon{
                margin-left: 0;
                margin-right: 15px;  
            }
        }
    }
    .game{
        padding-top: 50px;
        .game-title{
            h2{
                text-align: left;
            }
        }
        
        .game-video{
            margin-bottom: 30px;
        }
        .game-icon{
            .icon{
//              margin-left: auto;
//              margin-right: auto;
            }
        }
    }
    .partners{
        .icon-wrapper{
            margin-bottom: 15px;
//          padding-left: 0px;
            .icon{
//              margin-left: auto;
//              margin-right: auto; 
            }
        }
    }
}
